<template>
  <div class="opacity-setting d-flex al-center bd-filt">
    <el-slider
      v-model="styleObject.opacity"
      :min="0"
      :max="1"
      :step="0.01"
      class="flex-1 px-16 bgc-white"
      :show-tooltip="false"
    ></el-slider>
    <div class="slider-input p-r ml-16">
      <el-input-number
        :value="styleObject.opacity * 100"
        :min="0"
        :max="100"
        :step="1"
        :precision="0"
        :controls="false"
        @input="(val) => (styleObject.opacity = val / 100)"
      ></el-input-number>
      <i class="unit-percentage absCenterY">%</i>
    </div>
  </div>
</template>

<script>
  export default {
    model: { prop: 'styleObject' },

    props: {
      styleObject: {
        type: Object,
        default: () => ({})
      }
    }
  };
</script>

<style lang="scss" scoped>
  // 透明度
  .opacity-setting {
    ::v-deep .el-silder {
      border-radius: 2px;

      .el-slider__runway {
        margin: 14px 0;
      }
    }

    .slider-input ::v-deep {
      width: 78px;

      .el-input-number,
      .el-input {
        width: 100%;
      }

      .el-input__inner {
        padding: 0 28px 0 24px;
      }

      .unit-percentage {
        right: 10px;
        line-height: 1;
        color: #cecece;
      }
    }
  }
</style>
